<template>

  <div>
    <el-card class="box-card">

      <div>

        <div style="margin-top: 20px;margin-bottom: 20px;">
          <i class="el-icon-back" style="margin-right: 10px"><el-link :underline="false" style="font-size: large" @click="goOff">返回</el-link></i>
          <i class="el-icon-success" style="margin-right: 10px" v-if="status == 0"><el-link :underline="false" style="font-size: large" @click="submit">提交</el-link></i>
<!--          <i class="el-icon-remove" style="margin-right: 10px"><el-link :underline="false" style="font-size: large" @click="deleteById">删除</el-link></i>-->

          <el-popover
            placement="top"
            width="160"
            v-model="visible">
            <p>确定删除该数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="visible = false">取消</el-button>
              <el-button type="primary" size="mini" @click="deleteById">确定</el-button>
            </div>
            <template slot="reference">
              <i class="el-icon-remove" style="margin-right: 10px"><el-link :underline="false" style="font-size: large">删除</el-link></i>
            </template>
          </el-popover>

          <i class="el-icon-refresh" style="margin-right: 10px"><el-link :underline="false" style="font-size: large" @click="flush">刷新</el-link></i>
<!--          <i class="el-icon-download" style="margin-right: 10px"><el-link :underline="false" style="font-size: large">下载</el-link></i>-->
        </div>

        <el-divider></el-divider>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline,demo-ruleForm">
        <el-form-item>
          <div>
            <span style="font-size: large">订单基本信息</span>
          </div>
        </el-form-item>
        <el-divider></el-divider>
      </el-form>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
        <el-form-item label="订单编号">
          <el-input v-model="basicInfo.id"></el-input>
        </el-form-item>
        <el-form-item label="客户订单编号">
          <el-input v-model="basicInfo.customerOrderId"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
        <el-form-item label="客户名称">
          <el-input v-model="basicInfo.customerName"></el-input>
        </el-form-item>
        <el-form-item label="客户合同">
          <el-select v-model="basicInfo.customerContract" placeholder="选择合同">
            <el-option
              v-for="(item,index) in customerContracts"
              :key="index"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline,demo-ruleForm">
        <el-form-item label="订单来源">
          <el-select v-model="basicInfo.ordersources" placeholder="选择订单来源" :rules="[{ required: true, message: '科目不能为空'},]">
            <el-option
              v-for="(item,index) in ordersourceses"
              :key="index"
              :label="item"
              :value="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单类型">
          <el-select v-model="basicInfo.orderType" placeholder="选择订单类型">
            <el-option
              v-for="(item,index) in orderTypes"
              :key="index"
              :label="item"
              :value="index">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline,demo-ruleForm">
        <el-form-item label="运输方式">
          <el-select v-model="basicInfo.transType" placeholder="选择运输方式" :rules="[{ required: true, message: '科目不能为空'},]">
            <el-option
              v-for="(item,index) in transTypes"
              :key="index"
              :label="item"
              :value="index">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="checked">是否急单</el-checkbox>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
        <el-form-item label="接单日期">
          <el-input v-model="basicInfo.receiptDate"></el-input>
        </el-form-item>
        <el-form-item label="操作人">
          <el-input v-model="basicInfo.operator"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
        <el-form-item label="回单号">
          <el-input v-model="basicInfo.tRId"></el-input>
        </el-form-item>
      </el-form>

      <el-form :inline="true" :model="basicInfo" class="demo-form-inline">
        <el-form-item label="订单备注">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="basicInfo.remarks">
          </el-input>
        </el-form-item>
      </el-form>
      </div>
      <el-divider></el-divider>
      <div>
        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item>
            <div>
              <span style="font-size: large">提货点信息</span>
            </div>
          </el-form-item>
          <el-divider></el-divider>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item label="发货单位">
            <el-input v-model="addrinfos.forwardingUnit"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="addrinfos.shipmentContact"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="addrinfos.shipmentTelephone"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="addrinfos.shipmentMobilephone"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item label="发货地址">
            <div class="wrap">
              <div>
                你当前选的的地址:{{addrinfos.shippingAddress}}
              </div>
            </div>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item label="详细地址">
            <el-input v-model="addrinfos.shippingDetailAddress"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline">
          <el-form-item label="取货时间说明">
            <el-input v-model="addrinfos.pickupTime"></el-input>
          </el-form-item>
          <el-form-item label="要求提货日期">
            <el-input v-model="addrinfos.requiredPickupTime"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item>
            <div>
              <span style="font-size: large">收货地信息</span>
            </div>
          </el-form-item>
          <el-divider></el-divider>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item label="收货单位">
            <el-input v-model="addrinfos.receivingUnit"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="addrinfos.harvestContact"></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="addrinfos.receivingTelephone"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="addrinfos.receivingMobilephone"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item label="到货地址">
<!--            <v-distpicker class="picker"  @selected='onSelected2'></v-distpicker>-->
            你当前选的的地址:{{addrinfos.receivingAddress}}
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item label="详细地址">
            <el-input v-model="addrinfos.receivingDetailAddress"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline">
          <el-form-item label="到货时间说明">
            <el-input v-model="addrinfos.receivingTime"></el-input>
          </el-form-item>
          <el-form-item label="要求到货日期">
            <el-input v-model="addrinfos.requestedReceiptTime"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="addrinfos" class="demo-form-inline">
          <el-form-item label="回单类型">
            <el-select v-model="addrinfos.receiptType" placeholder="选择回单">
              <el-option
                v-for="(item,index) in receiptTypes"
                :key="index"
                :label="item"
                :value="index">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div>
        <el-table
        ref="selectlistRow"
        :data="selectlistRow"
        tooltip-effect="dark"
        style="width: 100%"
       >
        <el-table-column
          prop="id"
          label="编号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="goodsName"
          label="货物名称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="number"
          label="数量"
          width="120">
        </el-table-column>
        <el-table-column
          prop="unitWeight"
          label="单件重量(千克)"
          width="120">
        </el-table-column>
        <el-table-column
          prop="length"
          label="长(米)"
          width="120">
        </el-table-column>
        <el-table-column
          prop="wide"
          label="宽"
          width="120">
        </el-table-column>
        <el-table-column
          prop="high"
          label="高"
          width="120">
        </el-table-column>
          <el-table-column
            prop="monomerVolume"
            label="单体体积(立方米)"
            width="120">
          </el-table-column>
          <el-table-column width="100" label="包装">
            <template slot-scope="scope">
              <el-select v-model="scope.row.packing" placeholder="箱">
                <el-option
                  v-for="(item,index) in packings"
                  :key="index.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="运输条件" width="100">
            <template slot-scope="scope">
              <el-select v-model="scope.row.transportationConditions" placeholder="正常">
                <el-option
                  v-for="(item,index) in transportationConditions"
                  :key="index"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>

      </el-table>
      </div>
      <div class="block" style="margin-top: 5px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <el-divider></el-divider>
      <div>
        <el-form :inline="true" :model="addrinfos" class="demo-form-inline,demo-ruleForm">
          <el-form-item>
            <div>
              <span style="font-size: large">费用信息</span>
            </div>
          </el-form-item>
          <el-divider></el-divider>
        </el-form>

        <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
          <el-form-item label="运费单价(元/千克)">
            <el-input v-model="expenseinfos.weightUnitPrice"></el-input>
          </el-form-item>
          <el-form-item label="运费单价(元/立方米)">
            <el-input v-model="expenseinfos.volumeUnitPrice"></el-input>
          </el-form-item>
          <el-form-item label="运费合计">
            <el-input v-model="expenseinfos.totalFreight"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
          <el-form-item label="提货费">
            <el-input v-model="expenseinfos.deliveryFee"></el-input>
          </el-form-item>
          <el-form-item label="装卸费">
            <el-input v-model="expenseinfos.handlingCharges"></el-input>
          </el-form-item>
          <el-form-item label="包装费">
            <el-input v-model="expenseinfos.packingFee"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
          <el-form-item label="保险费">
            <el-input v-model="expenseinfos.insurancePremium"></el-input>
          </el-form-item>
          <el-form-item label="中转费">
            <el-input v-model="expenseinfos.transitFee"></el-input>
          </el-form-item>
          <el-form-item label="费用合计">
            <el-input v-model="expenseinfos.totalExpenses"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="expenseinfos" class="demo-form-inline">
          <el-form-item label="应收总计">
            <el-input v-model="expenseinfos.totalReceivable"></el-input>
          </el-form-item>
          <el-form-item label="预付款">
            <el-input v-model="expenseinfos.advanceCharge"></el-input>
          </el-form-item>
          <el-form-item label="代收金额">
            <el-input v-model="expenseinfos.collectionAmount"></el-input>
          </el-form-item>
        </el-form>

        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="结算方式">
            <el-checkbox checked>到货现结</el-checkbox>
            <el-checkbox disabled>月结</el-checkbox>
          </el-form-item>
        </el-form>

        <el-form :inline="true" :model="expenseinfos">
          <el-form-item label="银行账户信息">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="收款单位 ：    上海超人电器有限公司
开户行：          中国交通银行徐汇支行
账户：             98999989234839243243"
              v-model="expenseinfos.bankAccountInformation"
              style="width: 400px"
              disabled>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
    </el-card>
  </div>

</template>

<script>
export default {
  name: 'allInfo',
  inject:['reload'],
  data() {
    return {

      allInfos:[],

      orderId:'',
      status:0,
      basicInfo:{},
      //合同列表
      customerContracts:["合同1"],
      //订单来源列表
      ordersourceses:["手工录入","电脑导入"],
      //订单类型列表
      orderTypes:["运输订单","配送订单"],
      //运输方式列表
      transTypes:["火车","航运","海运","汽车"],
      //包装类型
      packings:[{
        value: '0',
        label: '箱'
      }, {
        value: '1',
        label: '个'
      },{
        value: '2',
        label: '条'
      }, ],
      transportationConditions:['正常','异常'],
      //新订单的地址信息id和费用信息id
      afids:[],
      checked:false,
      //回单类型
      receiptTypes:['电子回单'],
      //地址信息
      addrinfos:{},
      selected:{
        province: "",
        city: "",
        area: ""
      },
      area:'',

      //  货物信息
      selectlistRow: [],
      rowNum:1,
      sumInfo:{
        nums:'',
        weights:'',
        volumes:''
      },
      currentPage:1,
      pageSize:2,
      pageSizes:[2,4,6],
      total:1,


      //  费用信息
      expenseinfos:{},
      //删除确认弹框
      visible:false,

    }
  },
  methods:{

    //提交
    submit(){

      this.$http.get('http://localhost/order/submit/' + this.orderId)
        .then(resp => {
          if (resp.data.code == 100000){
            this.$message({
              type: 'success',
              message: resp.data.msg,
            });
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg,
            });
          }
        })

    },

    //刷新
    flush(){
      this.reload();
    },

    //返回上一页面
    goOff(){
      this.$router.go(-1);
    },

    //批量删除
    deleteById(){

      console.log(this.orderId)
      this.visible = false;

      let ids = [];
      ids.push(this.orderId)

      this.$http.post('http://localhost/order/delete',ids)
        .then(resp => {
          if (resp.data.code == 100000){
            this.$message({
              type: 'success',
              message: resp.data.msg,
            });
          }else {
            this.$message({
              type: 'error',
              message: resp.data.msg,
            });
          }
        })

      this.$router.push({path:'/order/list'});

    },

    //分页查询
    findGoodsByPage(){
      this.$http.get('http://localhost/goodsinfo/page',{
        params:{
          orderId:this.orderId,
          currentPage:this.currentPage,
          pageSize:this.pageSize
        }
      }).then(resp=>{
        if (resp.data.code == 100000){
          this.selectlistRow = resp.data.data.list;
          this.total = resp.data.data.total;
        }
      })
    },

    handleSizeChange(val){
      this.pageSize = val;
      this.findGoodsByPage();
    },
    handleCurrentChange(val){
      this.currentPage = val;
      this.findGoodsByPage();
    },

    //查询基本信息
    findBasicInfo(id){

      this.$http.get('http://localhost/orderbasicinfo/find/' + id)
        .then(resp => {
            this.basicInfo = resp.data.data;
            this.checked = this.basicInfo.urgentOrder != 0
            console.log("=======================")
            console.log(this.basicInfo)
     })

    },

    findFee(id){

      this.$http.get('http://localhost/expenseinfo/find/' + id)
        .then(resp => {
            console.log("==============================================")
            this.expenseinfos = resp.data.data;
            console.log(this.expenseinfos)
        })

    },

    findAddress(id){

      this.$http.get('http://localhost/addrinfo/find/' + id)
        .then(resp => {
            this.addrinfos = resp.data.data;
        })

    },

    findOrder(id){

      this.$http.get('http://localhost/order/find/' + id)
        .then(resp => {
          this.status = resp.data.data.orderStatus;
        })

    },

  },
  created() {

    this.orderId = this.$route.query.id
    console.log(this.orderId)
    this.findBasicInfo(this.orderId)
    this.findFee(this.orderId)
    this.findAddress(this.orderId)
    this.findGoodsByPage();
    this.findOrder(this.orderId);
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
